<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<script src="../../script/mui.min.js"></script>
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/swiper-3.4.2.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/exam.css">
		<link rel="stylesheet" href="../../css/layer.css">
		<title>老师端测验章节预览页</title>
		<script src="../../script/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			body {
				background: #FFFFFF;
			}
			.weui_mask {
				position: fixed;
				z-index: 998;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			.weui_dialog {
				z-index: 999;
			}
			.k-con1 {
				padding-top: 2px;
				padding-bottom: 36px;
			}
			.stu-test .test_card_div {
				font-size: 14px;
				position: absolute;
				right: 20px;
				top: -4px;
			}
			.swiper-wrapper {
				/*min-height: 400px*/
			}
			.PieChart_div {
				height: 200px;
				width: 100%
			}
			.nomalColor {
				background: #FFFFFF
			}
			.stu-test .space10 {
				height: 15px;
				background: #FFFFFF;
			}
			.k-con-part5 {
				margin-top: 0px;
				padding-left: 20px;
				padding-right: 20px;
				position: relative;
			}
			.qusetion-num-normal2 {
				margin: 6px;
				/* width: 44px;
				 height: 44px;*/
				line-height: 24px;
				text-align: center;
			}
			.Empty_title  .mui-checkbox input[type=checkbox]:checked, .Empty_title .mui-radio input[type=radio]:checked {
				border: 1px solid #333;
				background: 0 0;
			}
			.Empty_title  .mui-checkbox input[type=checkbox]:checked:before, .Empty_title .mui-radio input[type=radio]:checked:before {
				color: #333;
			}
			.stu-test .mui-btn-primary {
				color: #fff;
				background-color: #FF9900;
				border: 1px solid #FF9900;
				padding-left: 2em;
				padding-right: 2em;
			}
			.questionItemImgDiv {
				height: 12em;
				width: 80%;
				max-height: 14em;
				max-width: 95%;
				margin-left: 13px;
			}
			.xuanzeImgDiv {
				width: 80%;
				height: 8em;
				max-height: 10em;
			}
			.tiankong {
				font-family: inherit;
				border-bottom: 1px solid #000;
				margin: 0 8px;
				text-align: center;
				width: auto;
				/*word-break:break-all*/
			}
			.question_video_div {
				padding: 10px 10px;
				padding-left: 20px;
			}
			.question_video_div	video {
				width: 100%;
				height: 13em;
				background-color: black;
			}
			.question_video_div	img {
				width: 100%;
				height: 10em;
				background-color: black;
			}
			.option_video_div {
				padding: 10px 10px;
				padding-left: 55px;
			}
			.option_video_div	img {
				width: 100%;
				height: 8em;
				background-color: black;
			}
			.option_video_div	video {
				width: 100%;
				height: 12em;
			}
			table {
				border: 1px solid #ccc;
				border-collapse: collapse;
				border-spacing: 0;
			}
			td, th {
				border: 1px solid #ccc;
				padding: 0;
				text-align: center
			}
		</style>
	</head>
	<body >
		<div class="stu-test" id="scroll">
			<div class="base_style_color" id='BarAppearance' style="height: 22px;width: 100%; position:fixed; left: 0px;top:0px;z-index: 998" ></div>
			<div class="base_navigation_bar base_style_color base_navigation_item_bar" style="position: fixed;left: 0px;top: 20px;">
				<div class="base_navigation_bar base_style_color base_navigation_item_bar">
					<a class="base_left_item" href="#" onclick="backTestToast()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
					<span id="title"></span>
					<a class="base_right_item " id="describe"  onclick="openBewrite()" style="display: none;"> 描述</a>
				</div>
			</div>
			<div class="ReviewWeekly_div  nomalColor" style="margin-top: 64px"></div>
			<div class="space10 nomalColor"></div>
			<div class="k-con-border qusetion-type nomalColor" >
				<div class="k-con-part5" style="position: static">
					<p class="k-text-center k-c323 k-f12">
						<span class="test-score-detail "> 试卷分数：<span class="k-cred" id="score"></span>分 </span>
						<span class="test-score-detail"> 通过分数：<span class="k-cred" id="passscore"></span>分 </span>
						<span class="test-score-detail"> 考试时间：<span class="k-cred" id="kstime"></span>分 </span>
					</p>
				</div>
			</div>
			<div class="k-con test-m-bottom70 test-analysis nomalColor" id="question_div">
				<div class="swiper-container ">
					<div class="swiper-wrapper" ></div>
				</div>
			</div>
			<div class="k-con1 k-text-center k-fixed-bottom test-bottom1" id="sub_div">
				<div class="k-con-part1" id='sub_bt' >
					<div class="test_card_div">
						<a class="base_right_item "style="color: #18B4ED" href="#popover-card">答题卡 </a>
					</div>
				</div>
			</div>
			<div id="popover-card" class="mui-popover test-num-card" style=" width: 97%">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="scroll-card"></div>
				</div>
			</div>
			<div class="weui_dialog_alert" id="cAlert" style="display: none;">
				<div class="weui_mask" ></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd" id="checkNum3"></div>
					<div class="weui_dialog_bd" id="checkNum4"></div>
					<div class="weui_dialog_ft">
						<a onclick="openpo()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
			<div class="weui_dialog_alert" id="closeAlert" style="display: none;">
				<div class="weui_mask"></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd">
						<strong class="weui_dialog_title" id="checkNum2"></strong>
					</div>
					<div class="weui_dialog_ft">
						<a onclick="Cancel()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
			<div class="weui_dialog_alert" id="closeAlert_three" style="display: none;">
				<div class="weui_mask"></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd">
						<strong class="weui_dialog_title" id="checkNum5"></strong>
					</div>
					<div class="weui_dialog_ft">
						<a onclick="Cancel_Three()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/swiper-3.4.2.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script type="text/javascript" src="../../script/TestUi.js"></script>
	<script type="text/javascript" src="../../script/attachmentManager.js"></script>
	<script type="text/javascript">
		var daan = new Object();
		var questionLen = '';
		//题目名称数组
		var itemNameArr = new Array();
		//题目id数组
		var itemIdArr = new Array();
		var qidArr = new Array();
		var clickNum = "";
		var pid = "";
		// 计划id
		var cid = "";
		//课程id
		var chapterid = "";
		//章节id
		var tid = "";
		var stime = "";
		var timeNum = "";
		var passScore = "";
		var isanswer = "";
		var examnum = "";
		var apiready = function() {
			var pageParam = api.pageParam;
			if (api.pageParam.type == 0) {//mocc
				sendBuriedNotifi('0', 'MOOC课程测验章节老师预览页', '016');
			} else {
				sendBuriedNotifi('0', '自由课程测验章节老师预览页', '057');
			}
			var h = api.winHeight * 0.3;
			$('#popover-card').css('height', h);
			$('#title').text(isStringNull(api.pageParam.cdetailtitle));
			//开启加载框
			showProgress();
			scrollUI();
			//获取数据
			loadTestExamData();
			//按钮返回提示
			kebackListen();
		}
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				uname : $api.getStorage('cfnetppusername'),
				cid : api.pageParam.cid,
				pid : api.pageParam.pid,
				vid : api.pageParam.id,
			}
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}

		function openList() {
			$('#peoAlert').show();
		}

		function openpo() {
			event.stopPropagation();
			$('#cAlert').hide();
		}

		function setupChart(z_num, t_num, i, qid) {
			var f_num = z_num - t_num;
			var true_rate = strIsNum((t_num / z_num) * 100) + '%';
			var myChart = echarts.init(document.getElementById('PieChart' + (i + 1) + ''));
			var option1 = {
				title : {
					text : '正确率',
					x : 'center',
					subtext : true_rate
				},
				legend : {
					orient : 'vertical',
					left : 'left',
					selectedMode : false,
					borderRadius : 4,
					itemWidth : 12,
					itemHeight : 12,
					data : ['答对的', '答错的']
				},
				series : [{
					name : '人数',
					type : 'pie',
					radius : '55%',
					center : ['50%', '60%'],
					data : [{
						value : t_num,
						name : '答对的',
						itemStyle : {
							normal : {
								color : '#ea68a2'
							}
						}
					}, {
						value : f_num,
						name : '答错的',
						itemStyle : {
							normal : {
								color : '#00b7f0'
							}
						}
					}],
					itemStyle : {
						emphasis : {
							shadowBlur : 10,
							shadowOffsetX : 0,
							shadowColor : 'rgba(0, 0, 0, 0.5)',
						}
					}
				}]
			};
			var option = option1;
			myChart.setOption(option);
			myChart.on('click', function(params) {
				if (params.dataIndex == 0) {
					loadTestUserAnswerList(qid, 1);
					$('#checkNum4').html('答对了这道题');
				} else {
					$('#checkNum3').html('');
					loadTestUserAnswerList(qid, 2);
					$('#checkNum4').html('答错了这道题');
				}
			});
		}

		//获取单道题目的对错情况
		function loadTestUserAnswerList(qid, type) {
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				cid : api.pageParam.cid,
				pid : api.pageParam.pid,
				vid : api.pageParam.id,
				tid : api.pageParam.rid,
				question_id : qid,
				type : type
				//				type : 1//老师身份
			};
			cfnetppPOST(url_getTestUserAnswerList, param, false, function(data, status) {
				//			  alert(JSON.stringify(data))
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var list = data.data.list;
						if (list != null && list != '' && list != '[]' && list.length > 0) {
							var str = ''
							$('#cAlert').show();
							$('#checkNum3').html('');
							for (var i = 0; i < list.length; i++) {
								var str1 = '<span class="qusetion-num-normal2">' + list[i].rename + '</span>'
								str = str + str1;
							}
							$('#checkNum3').html(str);
						} else {
							ToastBtn('暂无学生数据');
						}
					} else {
						back1('数据异常');
					}
				} else {
					api.toast({
						msg : '网络异常',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		function ToastBtn(str) {
			$('#checkNum5').html(str);
			$('#closeAlert_three').show();
		}

		function Cancel_Three() {
			event.stopPropagation();
			$('#closeAlert_three').hide();
		}

		function loadTestExamData() {
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				cid : api.pageParam.cid,
				pid : api.pageParam.pid,
				vid : api.pageParam.id,
				tid : api.pageParam.rid,
				//				type : 1//老师身份
			};
			//			var url_getTestUserAnalysis1 = 'http://base.cfnet.org.cn/index.php/Course/Active/getTestUserAnalysis'
			cfnetppPOST(url_getTestUserAnalysis, param, false, function(data, status) {
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var list = data;
						if (list != null && list != '') {
							$('#score').text(list.score);
							$('#passscore').text(list.passscore);
							$('#kstime').text(list.elapse);
							timeNum = parseInt(list.elapse) * 60;
							if (api.pageParam.is_teacher != 1) {
								$('#sub_bt').show();
								$('#score_bt').hide();
							}
							tid = list.id;
							stime = list.stime;
							passScore = parseInt(list.passscore);
							var examlist = list.examlist;
							//计时器
							if (!isObjectEmpty(examlist)) {
								questionLen = examlist.length;
								SetTestUI(examlist);
							} else {
								back1('考试题目为空');
							}
						} else {
							back1('考试题目为空');
						}
					} else {
						back1('数据异常');
					}
				} else {
					api.toast({
						msg : '网络异常',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		function back1(str) {
			api.hideProgress();
			$("#checkNum2").text(str);
			$('#closeAlert').show();
		}

		function Cancel() {
			$('#closeAlert').hide();
			api.closeWin({
			});
		}

		function SetTestUI(list) {
			var data = list;
			var qxuan = '';
			var OrderNumStr = ''
			var xuanzeStr = "";
			var questionStr = "";
			var scoreStr = "";
			var questionLen = data.length;
			//	生成答题卡题号
			popoverCardNum(questionLen);
			for (var i = 0; i < questionLen; i++) {
				if (!isEmpty(data[i])) {
					qxuan = qxuanxiangIsNull(data[i].qxuanxiang);
					OrderNumStr = (i + 1) + '/' + questionLen;
					scoreStr = OrderNumStr + "." + "(" + judgeQuestionScore(data[i]) + "分)";
					questionStr = questionsImgIsNull(data[i].questions);
					$(".swiper-wrapper").append('<div class="swiper-slide" id="item' + (i + 1) + '" itemtype="' + data[i].qtype + '" qid="' + data[i].qid + '"></div>')
					if (data[i].qtype == 1 || data[i].qtype == 3 || data[i].qtype == 8) {//单选题和排序题和判断题
						$("#item" + (i + 1)).append('<div class="k-con-part3 clearfix">' + '<span id="itemType" class="k-f18">' + ByIdGetQuestionTypeName(data[i].qtype) + '</span>' + '<p class="k-f16 k-c323 k-mt5 indent-5">' + scoreStr + questionStr + '</p>' + '<div class="test-answer-list left_10"  "  itemtype="' + data[i].qtype + '">' + '</div>' + '</div>' + '<div id="PieChart' + (i + 1) + '"  qid="' + data[i].qid + '" class="PieChart_div"></div>')
						if (data[i].all_num > 0 && data[i].all_num != '') {
							setupChart(data[i].all_num, data[i].true_num, i, data[i].qid);
						}
						//	是单选或判断
						if (!isEmpty(qxuan)) {
							for (var k = 0; k < qxuan.length; k++) {
								var xuanzeStr1 = data[i].qtype != 3 ? qxuan[k].xuanzhe : panxuanzeReturnStr(k);
								xuanzeStr = xuanzheImgIsNull(xuanzeStr1);
								$("#item" + (i + 1) + " .test-answer-list").append('<div class="mui-input-row mui-radio mui-left Empty_title" >' + xuanzeStr + '<input    onclick="return false;"   name="radio' + data[i].qid + '" type="radio"   itemid="' + data[i].qid + '">' + '</div> ')
							}
						}
					} else if (data[i].qtype == 2 || data[i].qtype == 7 || data[i].qtype == 9) {//多选题和识图题
						$("#item" + (i + 1)).append('<div class="k-con-part3 clearfix">' + '<span id="itemType" class="k-f18">' + ByIdGetQuestionTypeName(data[i].qtype) + '</span>' + '<p class="k-f16 k-c323 k-mt5 indent-5">' + scoreStr + questionStr + '</p>' + '<div class="test-answer-list left_10" "  itemtype="' + data[i].qtype + '">' + '</div>' + '</div>' + '<div id="PieChart' + (i + 1) + '"  qid="' + data[i].qid + '" class="PieChart_div"></div>')
						if (data[i].all_num > 0 && data[i].all_num != '') {
							setupChart(data[i].all_num, data[i].true_num, i, data[i].qid);
						}
						//	是多选
						if (!isEmpty(qxuan)) {
							for (var k = 0; k < qxuan.length; k++) {
								xuanzeStr = xuanzheImgIsNull(qxuan[k].xuanzhe);
								$("#item" + (i + 1) + " .test-answer-list").append('<div class="mui-input-row mui-checkbox mui-left" >' + xuanzeStr + '<input   onclick="return false;" name="checkbox1" value="Item 1" type="checkbox"  itemid="' + data[i].qid + '">' + '</div>')
							}
						}
					} else if (data[i].qtype == 4 || data[i].qtype == 10) {//论述题和案例分析题
						$("#item" + (i + 1)).append('<div class="k-con-part3 clearfix">' + '<span id="itemType" class="k-f18">' + ByIdGetQuestionTypeName(data[i].qtype) + '</span>' + '<p class="k-f16 k-c323 k-mt5 indent-5">' + scoreStr + questionStr + '</p>' + '<div class="test-answer-list left_10" "  itemtype="' + data[i].qtype + '">' + '</div>' + '</div>' + '<div id="PieChart' + (i + 1) + '"  qid="' + data[i].qid + '" class="PieChart_div"></div>')
						if (data[i].all_num > 0 && data[i].all_num != '') {
							setupChart(data[i].all_num, data[i].true_num, i, data[i].qid);
						}
						$("#item" + (i + 1) + " .test-answer-list").append('<div class="test-answer-list">' + '<textarea disabled="disabled" class="k-texttarea k-f14" id="content" itemid="' + data[i].qid + '"></textarea>' + '</div>')
					} else if (data[i].qtype == 5) {//上传题
						$("#item" + (i + 1)).append('<div class="k-con-part3 clearfix">' + '<span id="itemType" class="k-f18">' + ByIdGetQuestionTypeName(data[i].qtype) + '</span>' + '<p class="k-f16 k-c323 k-mt5 indent-5 word-break">' + scoreStr + questionStr + '<p class="k-cred left_10">' + "移动端暂不支持上传题，请在PC端查看！" + '</p>' + '</p>' + '<div class="test-answer-list left_10"    "  itemtype="' + data[i].qtype + '">' + '</div>' + '</div>' + '<div id="PieChart' + (i + 1) + '"  qid="' + data[i].qid + '" class="PieChart_div"></div>')
						//					} else if (data[i].qtype == 9) {//视频题
						//						$("#item" + (i + 1)).append('<div class="k-con-part3 clearfix">' + '<span id="itemType" class="k-f18">' + ByIdGetQuestionTypeName(data[i].qtype) + '</span>' + '<p class="k-f16 k-c323 k-mt5 indent-5 word-break">' + scoreStr + questionStr + '</p>' + '<p class="k-cred left_10">' + "移动端暂不支持视频题，请在PC端查看！" + '</p>' + '<div class="test-answer-list left_10"  "  itemtype="' + data[i].qtype + '">' + '</div>' + '</div>' + '<div id="PieChart' + (i + 1) + '"  qid="' + data[i].qid + '" class="PieChart_div"></div>')
					} else {
					}
				} else {
					$("#scroll-card").find("span").eq(i).removeClass('qusetion-num-selected').addClass('qusetion-num-normal');
					//设置初始题目标题
					$(".swiper-wrapper").append('<div class="swiper-slide" id="item' + (i + 1) + '" ></div>')
					$("#item" + (i + 1)).append('<div class="k-con-part clearfix tont" >' + '<p class="k-f16 k-c323 k-mt15">' + (i + 1) + "、" + '本题为空' + '</p>' + '<div  class="test-answer-list" id="question_item' + data[i].qid + '">' + '</div>' + '</div>')
				}
			}
			var mySwiper = new Swiper('.swiper-container', {
				autoHeight : true,
				//					autoplay: 2000,//可选选项，自动滑动
				//用户操作swiper之后，是否禁止autoplay
				autoplayDisableOnInteraction : true,
				//				pagination : '.swiper-pagination',
				direction : 'horizontal',
				loop : false,
			})
			// 点击答题卡切换
			$("#popover-card span").on("click", function() {
				var index = $(this).index();
				mySwiper.slideTo(index, 1000, false);
				mui('#popover-card').popover('hide')
			});
		}

		function kebackListen() {
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				//coding...
				backTestToast();
			});
		}

		function backTestToast() {
			if (api.pageParam.type == 0) {//mocc
				sendBuriedNotifi('1', 'MOOC课程测验章节老师预览页', '016');
			} else {
				sendBuriedNotifi('1', '自由课程测验章节老师预览页', '057');
			}
			api.closeWin({
			});
		}
	</script>
</html>